<template>
  <div v-if="compData && compData.componentProps" :style="textStyle">
    {{ compData.componentProps.text }}
  </div>
</template>

<script lang="ts">
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import type TextInputPropOptionType from "@/visual/commons/types/text-input-prop-option-type";
import { computed, defineComponent, type PropType } from "vue";

export default defineComponent({
  name: "TextInput",
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<TextInputPropOptionType>>,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const textStyle = computed(() => {
      let textShadow = "";
      if (
        props.compData &&
        props.compData.styleProps &&
        props.compData.styleProps.textShadowList
      ) {
        console.info(props);
        const len = props.compData.styleProps.textShadowList.length;
        props.compData.styleProps.textShadowList.map((shadow, index) => {
          textShadow += `${shadow.hShadow}${shadow.hShadowUnit}  ${shadow.vShadow}${shadow.vShadowUnit}  ${shadow.blur}${shadow.blurUnit}  ${shadow.color} `;
          if (index < len - 1) {
            textShadow += ",";
          }
        });
      }

      const style = {
        fontSize: props.compData.styleProps?.fontSize + "px",
        fontStyle: props.compData.styleProps?.fontStyle,
        color: props.compData.styleProps?.color,
        fontWeight: props.compData.styleProps?.fontWeight,
        textDecoration: props.compData.styleProps?.textDecoration,
      };

      if (textShadow.length > 0) {
        style["textShadow"] = textShadow;
      }

      return style;
    });

    return {
      textStyle,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./TextInput.less";
</style>
